import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Radio, TreeSelect, Select, Row, Col, Button, Table } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

class AddResourceGroupModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (values.resourceGroupAssets) {
          for (var i = 0; i < values.resourceGroupAssets.length > 0; i++) {
            values.resourceGroupAssets[i].assetId = values.resourceGroupAssets[i].assetId_;
          }
          onOk(values);
        } else {
          Modal.warning({
            title: '提示',
            content: '请添加设备',
          })
        }
      }
    });
  };

  render() {

    const { children, user, dispatch, type, item, ipParamIdList, detailList, } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout2 = {
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
    };
    const formItemLayout1 = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout3 = {
      labelCol: { span: 9 },
      wrapperCol: { span: 15  },
    };
     const getIpParam = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.networkName}</Option>
    })

    const onAddDetail = () => {
      this.props.form.validateFields((err, values) => {
        if (!err) {
          dispatch({
            type: 'resourceGroup/queryAssetList',
            payload: values,
          })
        }
      });
    }
    const columns = [{
      title: '资产编号',
      dataIndex: 'assetNo',
      key: 'assetNo',
      fixed: 'left',
      width: 120
    }, {
      title: '资产分类',
      dataIndex: 'typeName',
      key: 'typeName',
      width: 120
    }, {
      title: '设备名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 120
    }, {
      title: '品牌',
      dataIndex: 'brandName',
      key: 'brandName',
      width: 120,
    }, {
      title: '设备型号',
      dataIndex: 'modelName',
      key: 'modelName',
      width: 100,
    }, {
      title: '设备序列号',
      dataIndex: 'serialNo',
      key: 'serialNo',
      width: 120,
    }, {
      title: 'RFID编码',
      dataIndex: 'rfidNo',
      key: 'rfidNo',
      width: 100,
    }, {
      title: '状态',
      dataIndex: 'statusName',
      key: 'statusName',
      width: 60,
    }, {
      title: '所在机房',
      dataIndex: 'roomName',
      key: 'roomName',
      width: 100,
    }, {
      title: '所在机柜',
      dataIndex: 'rackName',
      key: 'rackName',
      width: 100,
    }, {
      title: '起始U位',
      dataIndex: 'startU',
      key: 'startU',
      width: 70,
    }, {
      title: '购置时间',
      dataIndex: 'buyTime',
      key: 'buyTime',
      width: 150,
    }, {
      title: '维保结束日期',
      dataIndex: 'expirationTime',
      key: 'expirationTime',
      width: 150,
    }
    ];
    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={type == 'create' ? '新增资源组' : type == 'edit' ? '编辑资源组' : ''}
          visible={this.props.visible}
          width={1000}
          onOk={this.okHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ backgroundColor: '#fff' }}>
            <div style={{}}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                <Form layout={'inline'} style={{ marginTop: '-16px' }}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('id', { initialValue: type == 'edit' ? item.id_ + '' : '' })(
                      <Input type="hidden" />
                    )}
                    {getFieldDecorator('resourceGroupAssets', { initialValue: detailList })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <Row gutter={4}>
                    <Col span={6}>
                      <FormItem
                        label="名称"
                        hasFeedback
                        {...formItemLayout2}
                      >
                        {
                          getFieldDecorator('groupName', {
                            initialValue: type == 'edit' ? item.groupName : '',
                            rules: [{
                              required: true, whitespace: true, message: '请输入资源组名称',
                            }]
                          })(<Input placeholder="请输入资源组名称" style={{ width: "180px" }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                      <FormItem
                        label="ip地址"
                        hasFeedback
                        {...formItemLayout1}
                      >
                        {
                          getFieldDecorator('ip', {
                            initialValue: type == 'edit' ? item.ip : '',
                            rules: [{
                              required: true, whitespace: true, message: '请输入ip地址',
                            }]
                          })(<Input placeholder="请输入ip地址" style={{ width: "160px"  }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                      <FormItem
                        label="安全网关"
                        hasFeedback
                        {...formItemLayout3}
                      >
                        {
                          getFieldDecorator('manageIp', {
                            initialValue: type == 'edit' ? item.manageIp : '',
                            rules: [{
                              required: true, whitespace: true, message: '请输入安全网关',
                            }]
                          })(<Input placeholder="请输入安全网关" style={{ width: "160px" }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                      <FormItem
                        label="IP参数"
                        hasFeedback
                        {...formItemLayout1}
                      >
                        {
                          getFieldDecorator('paramId', {
                            initialValue: type == 'edit' ? item.paramId_ + '' : undefined,
                            rules: [{
                              required: true, whitespace: true, message: '请选择IP参数',
                            }]
                          })(
                            <Select
                              showSearch
                              style={{ width: "145px" }}
                              placeholder="选择IP参数"
                              optionFilterProp="children"
                            >
                              {getIpParam(ipParamIdList)}
                            </Select>
                            )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '15px' }}>
                    <Col span={24}>
                      <FormItem
                        label="备注"
                        hasFeedback
                      >
                        {
                          getFieldDecorator('remark', {
                            initialValue: type == 'edit' ? item.remark + '' : '',
                            rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                          })(<Input style={{ width: '890px' }} type="textarea" autosize={{ minRows: 3, maxRows: 3 }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '15px' }}>
                    <Col span={24}>
                      <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                    </Col>
                  </Row>
                  <Row>
                    <Col span={24}>
                      <div style={{ width: '100%', height: '100%', marginTop: '15px', marginBottom: '5px', textAlign: 'right', paddingRight: '10px' }}>
                        <FormItem>
                          <Button type="primary" size='large' onClick={onAddDetail}>新增设备</Button>
                        </FormItem>
                      </div>
                    </Col>
                  </Row>

                  <div style={{}}>
                    <div style={{ width: '100%', padding: "10px 20px 20px 0px" }}>
                      <Table columns={columns}
                        rowKey={record => record.id_}
                        dataSource={detailList}
                        pagination={false}
                        scroll={{ x: 1600 }}
                      />
                    </div>
                  </div>
                </Form>
              </div>
            </div>
          </div>
        </Modal>
      </span>
    );
  }

}

export default Form.create()(AddResourceGroupModal)
